﻿<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Assembly Name="NikCodes.SharePoint.ClientSide, Version=1.0.0.0, Culture=neutral, PublicKeyToken=4c65a114af13ca0d" %>
<%@ Page Language="C#" Inherits="NikCodes.SharePoint.ClientSide.DemoPage" MasterPageFile="~/_layouts/application.master" EnableViewState="false" EnableViewStateMac="false" %>
<%@ Import Namespace="Microsoft.SharePoint" %>

<asp:Content ID="WindowTitle" runat="server" ContentPlaceHolderID="PlaceHolderPageTitle">SharePoint Client Side - Scriptaculous Demo</asp:Content>
<asp:Content ID="PageTitle" runat="server" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea">Scriptaculous Demo</asp:Content>

<asp:Content ID="DemoScriptaculousHeader" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
</asp:Content>

<asp:Content ID="DemoScriptaculousContent" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <div>
        <a href="../Settings.aspx">Back to SharePoint Client Side Settings</a>
        <br /><br />
    </div>
    
    <h2>Draggable #1</h2>
    <div id="drag_demo_1" style="width:100px; height:100px; background:#7baaed; border:1px solid #333;"></div>
    <script type="text/javascript">
        new Draggable('drag_demo_1');
    </script>
    
    <h2>Draggable #2</h2>
    <div id="drag_demo_2" style="width:100px; height:100px; background:#fff85d; border:1px solid #333;"></div>
    <script type="text/javascript">
        new Draggable('drag_demo_2', { revert: true, snap: [40, 40] });
    </script>
    
    <h2>Draggable #3</h2>
    <div id="drag_demo_3" style="width:80px; height:80px; cursor:move; background:#88da5d; border:1px solid #333;"></div>
    <script type="text/javascript">
        new Draggable('drag_demo_3', { scroll: window });
    </script>

    <h2>Morph</h2>
    <div id="morph_demo" style="background:#cccccc; width:100px; height:100px;"></div>
    <ul>
      <li><a href="#" onclick="$('morph_demo').morph('background:#00ff00; width:300px;'); return false;">Click me for a demo!</a></li>
      <li><a href="#" onclick="$('morph_demo').morph('background:#cccccc; width:100px;'); return false;" >Reset the demo!</a></li>
    </ul>



    
</asp:Content>